const center = [104.1324, 36.92669]
var map = null
var mapDom = document.getElementById('map')
fetch('../data/style.json').then(res => res.json()).then(res => {
    map = new mapboxgl.Map({
        accessToken: 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A',
        container: mapDom, // container ID
        style: res,
        center: center, // starting position [lng, lat]
        zoom: 3
    });
})

document.getElementById('background').onclick = function () {
    map.addLayer({
        "id": "background",
        "type": "background",
        "paint": {
            "background-color": "black",
            "background-opacity": 0.3
        },
        "layout": {
            "visibility": "visible"
        }
    }, 'amap-tile')
}